
import { useState } from 'react'
import './index.scss'
import { useHistory } from 'react-router-dom'
import Nav from "../../component/Nav/index"
import { Cell, Calendar } from 'react-vant';
import { ImageUploader, Toast } from 'antd-mobile/2x'

//api
import api from '../../api/share'
import { putgroup } from '../../api/house'
export const Addgroup = () => {
    const { goBack } = useHistory()
    const maxCount = 1
    const [fileList, setFileList] = useState([])
    //发布数据
    const [form, setForm] = useState({
        img: '',
        create: '',
        update: '',
        name: '',
        address: ''
    })
    //日期选择开关
    const [visible, setVisible] = useState(false);
    //日期转换
    const formatDate = (date) => `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = ([start, end]) => {
        onchengeForm('create', formatDate(start))
        onchengeForm('update', formatDate(end))
        setVisible(false);
    };
    //上传图片
    const mockUpload = async (file) => {
        const formData = new FormData();
        formData.append("file", file);
        let res = await api.upload(formData)
        console.log(res.data);
        if (res.code === 200) {
            Toast.show({
                content: "上传成功"
            })
            onchengeForm('img', res.data.url)
        }
        return {
            url: res.data.url,
        }
    }

    const onchengeForm = (name, value) => {
        setForm(prev => {
            prev = {
                ...prev,
                [name]: value
            }
            return { ...prev }
        })
    }

    const submit = async () => {
        let img = fileList.map(v => {
            return v.url
        }).join(",");
        console.log(img);
        let res = await putgroup({ form: { ...form, img } })
        if (res.code === 200) {
            Toast.show({
                content: "添加成功"
            })
            goBack();
        }
    }
    console.log(form);
    return (
        <div className="addgroup">
            <Nav>添加团购</Nav>
            <div className="addgroup-main">
                <div className='form'>
                    <ImageUploader
                        value={fileList}
                        onChange={setFileList}
                        upload={mockUpload}
                        multiple
                        maxCount={maxCount}
                        showUpload={fileList.length < maxCount}
                        onDelete={(file) => {
                            api.upload({ name: file.url.split("/")[3] }).then(res => {
                                if (res.success) {
                                    Toast.show({
                                        content: "删除成功"
                                    })
                                }
                            })
                        }}
                        onCountExceed={exceed => {
                            Toast.show(`最多选择 ${maxCount} 张图片，你多选了 ${exceed} 张`)
                        }}
                    />
                    <input type="text" placeholder='请输入团购标题' value={form.name} onChange={({ target: { value } }) => { onchengeForm('name', value) }} />
                    <input type="text" placeholder='请输入楼盘地址' value={form.address} onChange={({ target: { value } }) => { onchengeForm('address', value) }} />
                    <Cell title="选择日期区间" onClick={() => setVisible(true)} />
                    <Calendar type="range" visible={visible} onConfirm={onConfirm} value={form.address} onChange={({ target: { value } }) => { onchengeForm('address', value) }} />

                    <textarea name="" id="" cols="30" rows="10" placeholder="团购介绍">

                    </textarea>

                </div>
            </div>
            <button style={{ fontSize: "30px", height: "80px" }} onClick={() => {
                submit()
            }}>
                创建团购
            </button>
        </div>
    );
};

export default Addgroup;
